<template>
    <div class="mainBox">
        <h2>信号机总体状态</h2>
        <div v-for="(item, index) of datas" :key="index" class="itemBox">
            <h1>{{ item.stationArea }}</h1>
            <div class="bigBox">
                <div
                    class="items"
                    v-for="(item1, index1) of item.machineProblemInfos"
                    :key="index1"
                    @click="go(index, index1, item1)"
                >
                    <div class="box"></div>
                    <span
                        :style="
                            item1.status === 0 || item1.status === null
                                ? 'color:#10b410'
                                : 'color:#ffff00'
                        "
                        >{{ item1.machineCode }}</span
                    >
                </div>
            </div>
        </div>
        <div class="bz">
            <div class="item">
                <div class="box" style="backgroundColor:#ffff00;"></div>
                <span>待整改</span>
            </div>
            <div class="item">
                <div class="box" style="backgroundColor:#10b410"></div>
                <span>正常</span>
            </div>
        </div>
        <div class="M">
            <div class="left">
                <h2>遗留问题</h2>
                <div>{{ ylwt }}</div>
            </div>
            <div class="right">
                <h2>整改建议</h2>
                {{ time ? time + "                " + content : content }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            datas: [],
            is: false,
            content: "",
            time: "",
            ylwt: "",
            DATA: [],
        };
    },
    methods: {
        go(index, index1, item1) {
            this.is = true;
            this.ylwt = item1.content;
            this.time = this.DATA[index].machineProblemInfos[index1].time;
            this.content = this.DATA[index].machineProblemInfos[index1].content;
        },
    },
    created() {
        this.$http
            .get("services/app/XinHaoJiService/GetAllXinHaoJiStatus")
            .then((res) => {
                this.datas = res.data.result;
                console.log(this.datas);
            });
        this.$http
            .get(
                "services/app/XinHaoJiService/GetAllXinHaoJiRectification"
            )
            .then((res) => {
                this.DATA = res.data.result;
                console.log(this.DATA);
            });
    },
};
</script>

<style lang="less" scoped>
.M {
    margin-top: 7.8125vw;
    display: flex;
    padding-bottom: 20px;
    .left,
    .right {
        margin-right: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        flex: 1;
        padding-left: 20px;
        font-size: 1.1719vw;
        box-shadow: 0px 0px 6px 0 #0053a1;
        h2 {
            display: flex;
            justify-content: left;
        }
    }
}
h2 {
    display: flex;
    justify-content: center;
}
.itemBox {
    margin-bottom: 10px;
    padding-left: 20px;
    box-shadow: 0px 0px 6px 0 #0053a1;
}
.mainBox {
    width: 100%;
    position: relative;
    .bz {
        position: fixed;
        right: 5%;
        top: 30%;
        .item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .box {
                width: 1.5625vw;
                height: 1.5625vw;
                margin-right: 20px;
                border-radius: 50%;
            }
        }
    }
    .bigBox {
        max-width: 800px;
        display: flex;
        flex-wrap: wrap;
    }
    .items {
        display: flex;
        flex-direction: column;
        align-items: center;
        .box {
            cursor: pointer;
            background-size: 25%;
            background-position: center;
            background-image: url("../../../assets/xhj.png");
            background-repeat: no-repeat;
            width: 80px;
            margin: 0 10px;
            height: 50px;
        }
    }
}
</style>
